<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style type="text/css">
    #div1 {
      color: #ff0000;
      /* 边框样式 */
      border-style: double solid;
      /* 上边框样式 */
      border-top-style: groove;
      /* 左边框样式 */
      border-left-style: outset;
      /* 上边框颜色 */
      border-top-color: orange;
      /* 上右下左内边距 */
      padding: 70px 50px 60px 80px;
    }
    #div2 {
      color: #000000;
      /* 边框样式 */
      border-style: dashed outset inset;
      /* 上、右、下、左边框样式 */
      border-color: rosybrown blue green pink;
      /* 外边距 */
      margin: 30px;
      /* 背景颜色 */
      background-color: bisque;
      /* 内边距 */
      padding: 10px
    }
    #span1 {
      color: orchid;
    }
    #span2 {
      color: lightgrey;
    }
  </style>
</head>
<body>
<div id="div1">
  流内容容器<br>
  <span id="span1">
    行内容器
  </span>
  <div id="div2">
    <p>段落</p>
  </div>
  <span id="span2">
    行内容器<br>
  </span>
  流内容容器
</div>
</body>
</html>